<!DOCTYPE html>

<html>
<meta charset="utf-8"/>
<title>iPhone手机解锁效果</title>
<style type="text/css">
#iphone{position:relative;width:426px;height:640px;margin:10px auto;background:url(iphone.jpg) no-repeat;}
#lock{position:absolute;left:50%;bottom:33px;width:358px;height:62px;margin-left:-179px;}
#lock span{
	position:absolute; left:0; top:0; width:93px;height:62px;cursor:pointer;background:url(unlock_btn.jpg) no-repeat;}
</style>
<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="move.yintao1.05.js"></script>
<script type="text/javascript">
	window.onload = function(){
		var phone = document.getElementById("iphone");
		var btn = document.getElementById("lock").children[0];
		
		btn.onmousedown = function(e){
			var e = e || event;
			var mousex = e.offsetX;
			var mousey = e.offsetY;
			document.onmousemove = function(e){
				var _left = e.clientX-mousex-getpageCoord(btn.parentNode).x;
				//[0,btn.parentNode.offsetWidth-btn.offsetWidth]
				//限制left取值范围
				_left = Math.min(Math.max(0, _left),btn.parentNode.offsetWidth-btn.offsetWidth);
				btn.style.left = _left + "px";
				
			}
		}
		document.onmouseup = function(){
			if(btn.offsetLeft >= btn.parentNode.offsetWidth/3){
				animate(btn, {left: 265}, {callback:function(){
					btn.style.display = "none";
					//phone.style.background = "url(iphone2.jpg)";
					//动态的生成一张图片,从0放大到全屏，然后删除
					var oImg = document.createElement("img");
					oImg.src = "iphone2.jpg";
					oImg.style.position = "absolute";
					oImg.style.right = oImg.style.bottom = 0;
					oImg.width = 0;
					phone.appendChild(oImg);
					animate(oImg, {width: phone.offsetWidth}, {
						callback:function(){
							phone.style.background = "url(iphone2.jpg)";
							oImg.remove();
						}
					});
				}});
			} else {
				animate(btn, {left: 0});
			}
			document.onmousemove = "";
		}
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</script>
</head>
<body>
<div id="iphone">
	<div id="lock"><span></span></div>
</div>


</body></html>